@charset "utf-8";

@import '../../theme.scss';

.x-cell {
  border-top: px(1) solid var(--x-border-color);
  border-bottom: px(1) solid var(--x-border-color);
  background: var(--x-cell-bg-color);
  overflow: hidden;
  min-height: px(100);

  &--no-border {
    border-top: none;
    border-bottom: none;
  }

  &__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: px(20) px(40);
    min-height: px(100);
    font-size: px(30);
    color: var(--x-text-color);
    position: relative;
    border-bottom: px(1) solid var(--x-border-color);
    transition: all 0.2s ease-out;

    .x-cell__addon-after {
      display: block;
      margin-left: auto;
      color: var(--x-text-color-o60);
      font-size: px(26);
    }

    &--divider-indent-left,
    &--divider-indent-both {
      border-bottom: none;

      &::after {
        content: '';
        display: block;
        height: px(1);
        background: var(--x-border-color);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }

      &:last-child::after {
        display: none;
      }
    }

    &--divider-indent-left::after {
      left: px(40);
    }

    &--divider-indent-both::after {
      left: px(40);
      right: px(40);
    }

    > label {
      font-size: px(30);
    }

    &:last-child {
      border-bottom: none;
    }

    &--arrow {
      padding-right: px(60);
    }

    &--activable {
      &:active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.03);
      }
    }
  }

  &__title {
    display: flex;
    align-items: center;
    margin-top: px(30);

    > h2 {
      font-size: px(30);
      font-weight: normal;
      color: var(--x-text-color-o90);
      line-height: px(60);
    }
  }

  &__arrow {
    width: px(28);
    height: px(28);
    position: absolute;
    pointer-events: none;
    right: px(18);
    top: 50%;
    transform: translate(0, -50%);

    path {
      opacity: 0.7;
      fill: var(--x-text-color-o30);
    }
  }
}
